<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    background-color: pink;
  }

  .pic {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: indianred;
  }

  .pic img {
    width: 600px;
    height: 300px;
  }

  p {
    text-align: center;
  }

  ul {
    position: absolute;
    width: 140px;
    height: 20px;
    left: 200px;
    bottom: -10px;
  }

  ul li {
    list-style: none;
    cursor: pointer;
    width: 15px;
    height: 15px;
    float: left;
    background-color: #fff;
    border-radius: 50%;
    margin-left: 10px;
  }

  .active {
    background-color: red;
  }
</style>

<body>
  <div class="box">
    <div class="pic"><img src="./王者荣耀images/1.webp" alt="">
      <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <p>我是文字</p>
  </div>
  <script>
    const pic = document.querySelector('img')
    const p = document.querySelector('p')
    const active = document.querySelector('.active')
    const box = document.querySelector('.box')
    const wenzi = [
      { title: '温度计啊肯德基', color: 'gray' },
      { title: '法律手段发顺丰麻烦', color: 'red' },
      { title: '富士康飞机哦束带结发', color: 'skyblue' },
      { title: '啊发酵豆粕家婆', color: 'yellow' },
      { title: '大佛哈佛哦阿胶', color: 'blue' }
    ]
    let i = 1
    let n = setInterval(function () {
      i++
      pic.src = `./王者荣耀images/${i}.webp`
      if (i >= 5) {
        i = 0
      }
      box.style.backgroundColor = wenzi[i].color
      p.innerHTML = wenzi[i].title
      document.querySelector('.active').classList.remove('active')
      document.querySelector(`li:nth-child(${i + 1})`).classList.add('active')
    }, 1000)
  </script>
</body>

</html>